<template>
    <view class="page">
        <view class="g-notice-list" v-if="!showNodata">
            <view class="g-notice-hd">
                <image src="../../../static/icons/notice_new.png" mode="widthFix"></image>
                <text>最新信息</text>
            </view>
            <view class="g-notice-item" v-for="(item, index) in data" :key="index" @tap="goUrl(item.url)">
                <view class="g-notice-icon">
                    <image src="../../../static/icons/notice.png" mode="widthFix"></image>
                </view>
                <view class="g-notice-text f-border1px">
                    <view class="g-notice-title">
                        <text>{{item.type_text}}</text>
                        <text>{{item.create_time}}</text>
                    </view>
                    <view class="info">{{item.content}}</view>
                </view>
            </view>
        </view>
		<view class="m-loading" v-if="showLoading">
			<image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata"><image src="../../../static/images/no_data.png" mode="widthFix"></image></view>
    </view>
</template>

<script>
	import henglang from '@/common/common_zb.js';
    export default {
        data() {
            return {
                data: [],
                page: 1,
                showLoading: false,
                showNodata: false,
				showTitle:false,
				totalPages:1,//总页数
				url:'',
            };
        },
        methods: {
            back() {
                uni.navigateBack();
            },
			goUrl(e) {
				if(e){
					uni.navigateTo({
						url:e
					})
				}
			},
            request(type) {
                let that = this;
				that.showLoading = true;
				if(that.page <= that.totalPages){
					henglang.get('member/getMessage',{page: that.page},true,function(res){
						that.showLoading = false;
						if (res.data.data.length === 0) {
							that.showNodata = true;
							return false;
						}
						if (type == 'plus') {
							that.data = that.data.concat(res.data.data);
						} else {
							that.data = res.data.data;
							that.totalPages = res.data.total_pages;
						}
					});
				}else{
					that.showLoading = false;
				}
            }
        },
        onReady() {
            this.request();
        },
        onReachBottom() {
            this.page += 1;
            this.request('plus');
        }
    }
</script>

<style>
    .page {
        background: #fafafa;
        min-height: 100vh;
    }

    .g-notice-list {
        padding-left: 20upx;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 20upx solid #f2f2f2;
        margin-top: 20upx;
    }

    .g-notice-list .g-notice-item:last-child .g-notice-text::after {
        display: none;
    }

    .g-notice-hd {
        padding-top: 20upx;
        display: flex;
        align-items: center;
        color: #828080;
    }

    .g-notice-hd image {
        width: 65upx;
        margin-right: 20upx;
    }

    .g-notice-item {
        display: flex;
        align-items: center;
    }

    .g-notice-icon {
        width: 90upx;
        height: 90upx;
        background: #fe413f;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20upx;
        border-radius: 100px;
    }

    .g-notice-icon image {
        width: 60upx;
    }

    .g-notice-text {
        padding: 40upx 0;
        color: #ccc;
        position: relative;
        flex: 1;
        max-width: 85%;
    }

    .g-notice-title {
        display: flex;
        justify-content: space-between;
        padding-right: 20upx;
    }

    .g-notice-title:first-child {
        color: #000;
        font-size: 32upx;
    }
	
	.g-notice-text .info {
	    color: #828080;
	}
	
    .g-notice-text::after {
        border-bottom: 1px solid #ccc;
    }
</style>
